<template>
	<div class="lietou-list content">
		<div class="lietou-right">
			<el-form ref="form" :inline="true" label-width="90px" size="small">
				<el-form-item label="手机号" label-width="80px">
					<el-input placeholder="请输入手机号" v-model="searchPhone" class="search-input" maxlength="11" clearable></el-input>
				</el-form-item>
				<el-form-item label="代理商名称">
					<el-input placeholder="请输入代理商名称" v-model="nickname" clearable class="search-input"></el-input>
				</el-form-item>
				<el-form-item style="margin:-2px 0 0 10px;">
					<el-button icon="el-icon-search" @click="searchData" class="buttonStyle">搜索</el-button>
				</el-form-item>
			</el-form>
			<el-table header-row-class-name="my-table-header" :data="tableData" class="answerTable" style="width: 100%;"
				:header-cell-style="{ background: '#eee',color:'#555555'}" stripe :row-style="{height:'54px'}"
				:highlight-current-row="true">
				<el-table-column fixed type="index" label="序列" width="80" column-key="id" align="center"></el-table-column>
				<el-table-column prop="nickname" label="代理商名称" align="center"></el-table-column>
				<el-table-column prop="lietou_agent_persent" label="猎头分佣" align="center"></el-table-column>
				<el-table-column prop="qiye_agent_persent" label="岗位分佣" align="center"></el-table-column>
				<el-table-column prop="usertel" label="手机号码" align="center"></el-table-column>
				<el-table-column prop="lietou_count" label="名下猎头数量" align="center"></el-table-column>
				<el-table-column prop="company_count" label="名下企业数" align="center"></el-table-column>
				<el-table-column prop="create_time" label="注册日期" align="center"></el-table-column>

				<el-table-column align="center" label="操作" width="150">
					<template slot-scope="scope">
						<el-button type="success" size="small" @click="cancleLahei(scope.row.id)">取消清退</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" class="row-bg" justify="center" v-show="pageCount>1">
				<el-col :span="24" style="text-align:center;margin-top:50px">
					<el-pagination background layout="prev, pager, next" :page-size="pageSize" :page-count="pageCount"
						:current-page="pageNo" @current-change="pageChange">
					</el-pagination>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import LietouLeftBar from './components/leftBar'
	export default {
		name: 'CityClearHistory',
		components: {
			LietouLeftBar
		},
		computed: {
			...mapGetters([
				'token'
			])
		},
		data() {
			return {
				searchPhone: '',
				nickname: '',
				tableData: [], //表格数据
				pageCount: 0,
				pageNo: 1,
				pageSize: 10
			}
		},
		async created() {
				this.loadData();
			},
			methods: {
				// 搜索
				searchData() {
					this.pageNo = 1;
					this.loadData();
				},
				//分页
				pageChange(val) {
					this.pageNo = val;
					this.loadData()
				},
				async loadData() {
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.5)'
					});
					try {
						let data = {
							"token": this.token,
							"mobile": this.searchPhone,
							"nickname": this.nickname,
							"p": this.pageNo, //分页页码
							"size": this.pageSize, //分页每页数量
							"is_agent_qingtui": 2 //是否被清退 1 否 2 是 0 全部
						}
						let res = await this.$http({
							url: '/man/Agent/getList',
							method: 'post',
							params: data
						});
						this.tableData = res.data;
						this.pageCount = res.max_page; //总页数
						this.pageNo = Number(res.p); //当前页 size当前页
						loading.close();
					} catch (e) {
						console.log(e)
						loading.close();
					}
				},
				// 取消拉黑
				cancleLahei(id) {
					this.$confirm('确定取消清退此用户?', '操作确认', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(async value => {
						try {
							let res = await this.$http({
								url: '/man/Agent/qingtui',
								method: 'post',
								params: {
									"token": this.token,
									"id": id,
									"is_qingtui": 1 //	是否清退 2 是 1 否
								}
							});
							this.$message({
								type: 'success',
								message: '已取消清退!'
							});
							this.loadData();
						} catch (e) {
							console.log(e)
						}
					}).catch(() => {
						
					});
				}
			}
		}
</script>

<style lang="scss" scoped="scoped">
	.el-button.buttonStyle {
		height: 32px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background: #3674FF;
		border-radius: 5px;
		border: 0;
		margin-left: 6px;
		margin-top: 2px;
	}

	.answerTable {
		margin-top: 15px;
	}

	.lietou-right {
		margin-top: 30px;
	}
</style>
<style>
	.el-message{
		top:120px !important;
	}
</style>